<template>
        <view class="draw-page">
             <view class="box">
                     <th-autograph 
                     ref="canvasBox"
                     :is-download="false" 
                     :horizontalScreen="false"
                     canvas-id="autograph">
                     </th-autograph>
             </view>
             <view class="book-page-body">
                    <image  src="@/static/demo/draw.jpeg"></image>
             </view>
        </view>
    
</template>

<script>
	import thAutograph from "@/components/th-autograph/th-autograph.vue"
    export default {
        data(){
            return {
                vw:'100vw',
                vh:'100vh',
                imgBack:"../../static/demo/draw.jpeg"
            }
        },
        components:{
            thAutograph
        },
        onLoad() {
            window.addEventListener('orientationchange',(event)=>{
                this.$refs.canvasBox.clear()
            })
        },
        onLaunch() {
            plus.screen.lockOrientation('portrait-primary')
        },
        mounted() {
            console.log(1)
        }
        
    }
</script>

<style scoped>
    .draw-page{
        height: 100vh;
        max-width: 750px;
        position: fixed;
        width: 100%;
    }
    .box{
    		width: 100%;
    		height: 100%;
            position: relative;
    	}
    .book-page-body{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top:0;
        left:0;
        display: flex;
        align-items: center;
    }
    .book-page-body uni-image{
        width: 100%;
    }
   @media screen and (orientation: landscape) {
      .book-page-body uni-image{
          height: 100%;
      }
    }
</style>